<!-- 主要页面左侧导航的一级选项 -->
<template>
  <li class="nav-menu-item"  @click="changeCurrentId(id)" :class="id === CurrentOption ? 'is-active': ''">
    <i :class="FirstItemInfo.iClass"></i>
    <span class="nav-menu-item-title">{{FirstItemInfo.title}}</span>
  </li>
</template>
<script lang="ts">
import {Vue,Component,Prop}from  "vue-property-decorator";
import {LeftNavMenuStore} from "../store/modules/LeftNavMenu"
// 创建暴露接口用于后续类型判断
export interface FirstItemInfo{
    id:number
    iClass:string
    title:string
}

@Component({
    name:"FirstItem"
})
export default class extends Vue{
    // 每个实例赋予一个id属性
    id=this.$props.FirstItemInfo.id

    @Prop()FirstItemInfo!:FirstItemInfo
    
    // 计算属性，返回当前用户选择的选项ID
    get CurrentOption():number{
        return LeftNavMenuStore.CurrentId
    }
    // 每次点击改变vuex中储存的id属性
    changeCurrentId(id:number):void{
        if(id==LeftNavMenuStore.CurrentId){
            return 
        }
        LeftNavMenuStore.ChangeCurrentId(id);
        // 实现路由的跳转
        this.$router.push({
            name:this.FirstItemInfo.title
        })
    }
}
</script>
<style>
.nav-menu-item>i{
    margin-right: 7.2px;
}
.is-active{
    color:#2d8cf0;
    border-left:5.6px solid #4db2c8!important;
}
</style>